<template>
<!-- 办公情况 -->
    <div class="main">
        <div class="form-container">
            <div class="form-main">
                <span class="one_title">&nbsp;&nbsp;四、办公情况&nbsp;&nbsp;</span>
                <div class="query-time" style="position: relative;">
					<span class="required" style="color:red">*</span>
					<label for="name">复工日期（春节后第一天上班的日期）</label><br/>
					<div style="margin-top: 10px;margin-bottom: 20px; width:100%; height: 32px; line-height:32px; border: 1px solid #cccccc; text-align: center; " @click="postDateShow=true" >
						<span class="select_show">{{postDate}}</span>
					</div>
					<span @click="postDate=''" v-if="postDate" style="position: absolute;right: 0;top: 31px;margin-right: 10px;padding: 0 10px;font-size: 18px;line-height: 1.7;">x</span>
					<datetime style="display:none;" v-model="postDate" :show.sync="postDateShow"></datetime>
				</div>
                <div class="personnelType">
                    <span class="required" style="color:red">*</span> 
                    <label for="contact">今日办公情况</label><br/>
                    <div class="form-border form-twoBor">
                        <div>
                            <el-radio v-model="dutyStatus" label="1">远程</el-radio>
                        </div>
                        <div style="border-top: 1px solid #c6c8c9;" >
                            <el-radio v-model="dutyStatus" label="2">现场</el-radio>
                        </div>
                        <div style="border-top: 1px solid #c6c8c9;" >
                            <el-radio v-model="dutyStatus" label="3">请假</el-radio>
                        </div>
                    </div>
                </div>
                <div class="personnelType">
                    <span class="required" style="color:red">*</span> 
                    <label for="contact">明日办公情况</label><br/>
                    <div class="form-border form-twoBor">
                        <div>
                            <el-radio v-model="tdutyStatus" label="1">远程</el-radio>
                        </div>
                        <div style="border-top: 1px solid #c6c8c9;" >
                            <el-radio v-model="tdutyStatus" label="2">现场</el-radio>
                        </div>
                        <div style="border-top: 1px solid #c6c8c9;" >
                            <el-radio v-model="tdutyStatus" label="3">请假</el-radio>
                        </div>
                    </div>
                </div>
                <div class="personnelType">
                    <span class="required" style="color:red">*</span> 
                    <label for="contact">后日办公情况</label><br/>
                    <div class="form-border form-twoBor">
                        <div>
                            <el-radio v-model="ydutyStatus" label="1">远程</el-radio>
                        </div>
                        <div style="border-top: 1px solid #c6c8c9;" >
                            <el-radio v-model="ydutyStatus" label="2">现场</el-radio>
                        </div>
                        <div style="border-top: 1px solid #c6c8c9;" >
                            <el-radio v-model="ydutyStatus" label="3">请假</el-radio>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { newquestionnaireData ,queryCityData} from '@/assets/js/service'
import { Confirm , Datetime,PopupPicker,Popup} from 'vux'

export default {
    components: {
        Confirm,
        Datetime,
        PopupPicker,
        Popup
    },
    data () {
        return {
            dutyStatus:'1',//在岗状态(1远程在岗、2现场在岗，3离岗，4出差，5休假）
            tdutyStatus:'1',
            ydutyStatus:'1',
            postDate:'',//复工日期
            postDateShow:false,

        }
    },
    created () {
        let arr = JSON.parse(localStorage.getItem('enterpriseHomeData'))
		if(arr) {
            let personInfo = JSON.parse(arr[0])
            this.dutyStatus = personInfo.todayOfficeSituation;
            this.tdutyStatus = personInfo.torrowOfficeSituation;
            this.ydutyStatus = personInfo.thirdDayOfficeSituation;
            this.postDate = personInfo.postDate;
        }
    },
    mounted: function () {
        
    },
    watch:{

    },
    methods: {

    }
}
</script>
<style lang="less" scoped>

.main{
    overflow: hidden;
    // background: url("../../assets/images/home/bj.png") 0 0;
    background-size: 100% 100%;
    .form-container{
        background: #f8fafb;
        background-size: 100% 100%;
        width: calc(100% -16px);
        border-radius: 8px;
        // padding-top: 15px;
        border: solid 1px #e5e5e5;
        // margin: 0 3%;
        margin-left:8px;
        margin-right:8px;
        // margin-bottom: 10px;
        padding-bottom: 25px;
        .form-main{
            position: relative;
            width: 100%;
            padding: 0 20px;
            color: #333;
            border-radius: 8px;
            background-color: #f5f8fa;
            padding-top: 40px;
            label{
				font-size: 15px;
				font-weight: bold;
			}
			.one_title{
				height: 30px;
				line-height: 21px;
				display: block;
				position: absolute;
				font-size: 17px;
				font-weight: 700;
				top: 0;
				left: 10px;
				border-bottom-left-radius: 12px;
				border-bottom-right-radius: 12px;
				padding: 4px 0;
				background: rgba(119,136,153,.2);
			}
            h4{
                margin-top: 15px;
            }
            .form-border{
                background-color: rgba(255, 255, 255, 0.9);
                color: #333333;
                padding:5px;
                margin: 5px 0;
                width: 100%;
                margin-bottom: 20px;
                border-radius: 3px;
                box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.8);
            }
            .tizheng{
                div{
                    width: 33.33%;
                    float: left;
                    padding: 10px 5px;
                    font-size: 15px;
                    input{
                        vertical-align: middle;
                        width: 15px;
                        height: 15px;
                    }
                }
            }
            .form-twoBor{
                padding: 5px 0;
                div{
                    width: 100%;
                    padding: 10px 10px;
                    input{
                        vertical-align: middle;
                        width: 20px;
                        height: 20px;
                    }
                    label{
                        font-size: 15px;
                    }
                }

            }
            
        }
	}
	.textAreaBox {
		position: relative;
		height: 8em;
		padding: 0;
		z-index: 2;
		textarea {
			position: relative;
			width: 100%;
			height: 100%;
			padding: 10px;
		}
		span {
			position: absolute;
			right: 0;
			bottom: 0;
			z-index: 1;
			color: #ccc;
		}
	}
.yy-input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    /* WebKit browsers */
    color: red;
  }
    
}
</style>